import { defineComponent, PropType, watch } from "vue";
import { useVModel } from "@vueuse/core";
import i18n from "@/lang";
import './index.less';

export default defineComponent({
    props: {
        items: Object as PropType<any[]>,
        value: [Array, Number, String],
    },
    setup(props, { emit }) {
        const selected = useVModel(props, "value", emit);
        const lang = [
            {
                name: "简体中文",
                id: "cn",
            },
            {
                name: "English",
                id: "en",
            },
            {
                name: "日本語",
                id: "jp",
            },
            {
                name: "한국어",
                id: "ko",
            },
            {
                name: "繁體中文",
                id: "tra",
            },
            {
                name: "ไทย",
                id: "thai",
            },
            {
                name: "Melayu",
                id: "malay",
            },
            {
                name: "Tiếng Việt",
                id: "vietnam",
            }
        ]

        watch(() => props.value, (val: any) => {
            i18n.global.locale.value = val
            localStorage.setItem('locale', val)
        })

        return () => (
            <a-select v-model={[selected.value, "value"]} style={{ width: "160px" }} bordered={false}
                v-slots={{
                    suffixIcon: () => {
                        return (<img src="/head/home_button_right_normal.svg" />)
                    },
                }}
            >
                {lang?.map(item => {
                    return (
                        <a-select-option value={item.id} key={item.id}>
                            {item.name}
                        </a-select-option>
                    );
                })}
            </a-select>
        );
    },
});
